<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OA模拟与实现</title>
    <link rel="stylesheet" th:href="@{/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css}"/>

    <script th:src="@{/js/jquery-3.2.1.min.js}"></script>
    <!--<script th:src="@{https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js}"></script>-->
    <script th:src="@{/js/jquery.cookie.js}"></script>
    <script th:src="@{http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js}"></script>
    <script th:src="@{http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js}"></script>
    <style>
        body{
            user-select: none;
        }
        .cont{
            width: 350px;
            height: 350px;
            margin:50px auto;
        }
        .self-btn{
            margin-left: 182px;
        }
        .self-margin{
            margin-top: 20px;
        }
        h3{
            margin:0 auto;
        }
        .center-block {
            display: block;
            margin-left: auto;
            margin-right: auto;
        }
        .ck{
            margin-top:20px;
        }
    </style>
</head>
<body class="bg-info">
    <div class="container">
        <div class="cont">
            <form class="form-inline" id="form"  method="post" th:action="@{/login/login}">
                <span>学生输入学号，教师领导输入姓名</span>
                <input type="hidden" value="" name="identity" id="identity">
                <div class="form-group">
                    <label for="uname">用户名：</label>
                    <input type="text" name="oname" class="form-control input-lg" id="uname" placeholder="用户名" required>
                    <span id="namemsg"></span>
                    <!-- <span class="">
                        <span class="glyphicon glyphicon-ok"></span>
                        glyphicon glyphicon-remove
                    </span> -->
                </div>
                <div class="form-group self-margin">
                  <label for="pwd">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
                  <input type="password" name="opassword" class="form-control input-lg" id="pwd" placeholder="密码" required>
                  <!-- <span class="">
                    <span class="glyphicon glyphicon-ok"></span>
                  </span> -->
                </div>
                <div class="ck">
                    <label>
                      <input id="check" type="checkbox"> 记住密码
                    </label>
                    <!--<label>-->
                        <!--<input id="uncheck" type="checkbox"> 忘记密码-->
                    <!--</label>-->
                    <button type="submit" class="btn btn-primary self-btn">登录</button>
                </div>
            </form>
            <span th:text="${session.loginerror!=''?'':session.loginerror}"></span>
        </div>
    </div>
    <script>
        
        $(function(){

            var username = $.cookie("username");
            var password = $.cookie("password");
            if(username!=undefined&&password!=undefined){
                $("#check").prop("checked",true)
                $("#uname").val(username);
                $("#pwd").val(password);
            }
            /*校验是否为空*/
            $("#form").submit(function(){
                var uname = $("#uname").val();
                var pwd = $("#pwd").val();
                if(uname == "" || pwd == ""){
                    return false;
                }
                /**添加cookie**/
                // if($("#check").prop("checked")==true){
                //     //var uname = $("#uname").val();
                //     //var pwd = $("#pwd").val();
                //     $.cookie("username",uname,{expires:1,path:'/'});
                //     $.cookie("password",pwd,{expires:1,path:'/'});
                // }else{
                //     $.removeCookie("username");
                //     $.removeCookie("password");
                // }
                return true;
            })
            /**添加或取消cookie**/
            $("#check").click(function(){
                if($(this).prop("checked")==true){
                    var uname = $("#uname").val();
                    var pwd = $("#pwd").val();
                    $.cookie("username",uname);
                    $.cookie("password",pwd);
                }else{
                    $.removeCookie("username");
                    $.removeCookie("password");
                }

            })
            /**校验**/
            $.validator.setDefaults({
                submitHandler: function() {
                    form.submit()
                }
            });
            $("#form").validate({
                rules:{
                    uname: {
                        required: true,
                        minlength: 3
                    },
                    pwd:{
                        required: true,
                    }
                },
                messages:{
                    uname: "请输入正确名字"
                }
            });
        
            /*ajax*/
            $("#uname").blur(function(){ 
                var text = $(this).val();
                var reg = /^\d{9}$/;
                // alert(text)
                if(reg.test(text)){
                    $("#identity").val("student");
                }
                //ajaxcheck(text);
            });
            $("#pwd").blur(function(){
                var text = $(this).val();
                ajaxcheck(text);
            });
            function ajaxcheck(text){
                console.log(text);
                $.ajax({
                    url:"",
                    data:{"unmae":text},
                    success:function(data){
                        
                    }
                })
            }
        })


    </script>
</body>
</html>